<template>
  <!-- 主布局容器 -->
  <div>
    <!-- 头部区域 -->
    <header>
      <h1>企业官网</h1>
      <nav>
        <!-- Element Plus 水平菜单导航 -->
        <el-menu mode="horizontal" :default-active="activePath" background-color="#409EFF" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="/" @click="goTo('/')">首页</el-menu-item>
          <el-menu-item index="/about" @click="goTo('/about')">关于我们</el-menu-item>
          <el-menu-item index="/products" @click="goTo('/products')">产品服务</el-menu-item>
          <el-menu-item index="/news" @click="goTo('/news')">新闻动态</el-menu-item>
          <el-menu-item index="/cases" @click="goTo('/cases')">客户案例</el-menu-item>
          <el-menu-item index="/contact" @click="goTo('/contact')">联系我们</el-menu-item>
        </el-menu>
      </nav>
    </header>
    <!-- 页面主体内容插槽 -->
    <main>
      <slot />
    </main>
    <!-- 底部区域 -->
    <footer>
      <p>© 2024 企业官网 版权所有</p>
    </footer>
  </div>
</template>

<script setup>
// 引入 vue-router 用于页面跳转和获取当前路由
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 当前激活菜单项路径
const activePath = route.path
// 跳转函数
function goTo(path) {
  router.push(path)
}
</script>

<style scoped>
header {
  background: #409EFF;
  color: #fff;
  padding: 20px;
}
nav {
  margin-top: 10px;
}
main {
  min-height: 400px;
  padding: 30px 0;
}
footer {
  background: #f5f5f5;
  text-align: center;
  padding: 20px 0;
  color: #888;
  margin-top: 40px;
}
</style> 